// 屏幕高度: clientHeight, 某一标签距离页面顶部高度: offsetTop, 滚动高度: scrollTop

window.onload = function() {
    // 一定要放在这里面,因为每次一刷新。js只会加载一次
    control_width()
    window.onscroll = function() {
        if(scroll_height()) {
            append_img()
            console.log('到底了')
        }
    }
}


function append_img() {
    img_data = {
        data: [
            {src:"./img/1.jpeg"},
            {src:"./img/2.jpeg"},
            {src:"./img/3.jpeg"},
            {src:"./img/4.jpeg"},
            {src:"./img/5.jpeg"},
            {src:"./img/6.jpeg"},
            {src:"./img/7.jpeg"},
            {src:"./img/8.jpeg"},
            {src:"./img/9.jpeg"},
            {src:"./img/10.jpeg"},
            {src:"./img/11.jpg"},
        ]
    }
    var container = document.getElementById('container')
    for(var i = 0; i < img_data.data.length;i++) {
        var childBox = document.createElement("div");
        childBox.setAttribute("class","box");


        var childImgBox = document.createElement("div");
        childImgBox.setAttribute("class","boximg");


        var img = document.createElement("img");
        img.setAttribute("src",img_data.data[i].src);
        childImgBox.appendChild(img)
        childBox.appendChild(childImgBox);
        container.appendChild(childBox);
    }
    control_width()
}


// 控制宽度
function control_width(){
    screen_width = document.documentElement.clientWidth
    // 获取所有每个图片宽度,这里要写box而不是boximg
    all_img = document.getElementById('container').getElementsByClassName('box')
    var img_width = all_img[0].offsetWidth
    // 获取一行可以放多少个元素
    var img_num = Math.floor(screen_width / img_width) - 1
    // 设置container宽度
    document.getElementById('container').style = 'width:' + img_num * img_width + 'px;margin:0 auto'
    // 改变图片的排列
    change_img_arrangement(all_img, img_num)
}


function change_img_arrangement(all_img, img_num) {
//     循环所有元素
    //图片高度列表
    var img_height_list = [];
    for(var i = 0; i < all_img.length; i++) {
        if(i < img_num) {
            img_height_list.push(all_img[i].offsetHeight)
        } else {
            // 寻找最小高度
            var min_height = Math.min.apply(null, img_height_list)
            // 找到最小高度元素的下标
            var min_height_index = img_height_list.indexOf(min_height)
            all_img[i].style.position = 'absolute'
            all_img[i].style.top = min_height + 'px'
            all_img[i].style.left = all_img[min_height_index].offsetLeft + 'px'
            // 新元素添加到图片高度列表
            img_height_list[min_height_index] += all_img[i].offsetHeight  // 加元素的高度
        }
    }
}



function scroll_height() {
    var height = document.documentElement.scrollTop
    last_height = all_img[all_img.length-1].offsetTop
    return height + screen_width > last_height
}

